<template>
	<view>
		<!-- 消费记录 -->
		<view class="record">
			消费记录
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in moneyRecord" :key="index">
				<view class="top">
					<view class="title">
						{{item.title}}
					</view>
				</view>
				<view class="bottom">
					<view class="date">
						{{item.createDate}}
					</view>
					<view class="now">
						{{item.amount}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				moneyRecord: []
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getMoneyRecord()
		},
		methods: {
			async getMoneyRecord() {
				const {
					data: res
				} = await uni.$http.post('/user/getPayRecord', {
					"userId": this.userInfo._id,
					"offset": 1,
					"limit": 99
				})
				console.log(res)
				if (res.success == 0) {
					this.moneyRecord = res.data.list
				}
			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		},
	}
</script>

<style lang="scss">
	.now {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-top: 25rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 500;
		color: #111111;
	}

	.date {
		font-size: 28rpx;
		font-weight: bold;
		color: #666666;
		margin-top: 25rpx;
	}

	page {
		padding: 30rpx 25rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
	}

	.record {
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.list {
		.item {
			height: 140rpx;
			border-bottom: 1rpx solid #e8e8e8;
			padding: 13rpx 0;
			box-sizing: border-box;
			font-size: 30rpx;

			.top,
			.bottom {
				display: flex;
				justify-content: space-between;

				.date {
					font-size: 28rpx;
					font-weight: bold;
					color: #666666;
					margin-top: 25rpx;
				}
			}

		}
	}
</style>
